<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/login1.css">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <style>
        .none{
            width:100%;
            height:28.45rem;
            background:rgba(98,98,98,0.6);
            position:absolute;
            top:0;
            left:0;
            display: none;
        }

    </style>
</head>
<body>
<header>
    <a href="login2.html"><span><img src="../img/lt.png" alt=""></span></a>
    <p>忘记密码</p>
</header>
<p class="p">重置您的登录密码</p>
<div class="tel">
    <span><img src="../img/suo1.png" alt=""></span>
    <input class="inp" type="password" placeholder="请输入与6-24位的登录密码">
    <span><img id="spa" src="../img/eye.png" alt=""></span>

</div>
<a href="#">
    <div class="next">
        确定
    </div>
</a>
<div class="none">
    <div class="block_two">
        <p>重置密码成功，请重新登录</p>
        <a href="login.html"><div>确定</div></a>
    </div>
</div>
<script>
    var next = document.getElementsByClassName("next")[0];
    var inp = document.getElementsByClassName("inp")[0];
    var spa = document.getElementById("spa");
    i = 0;
    spa.onclick = function () {
        i++;
        if(i%2 != 0){
            inp.setAttribute("type","text");
        }else{
            inp.setAttribute("type","password");
        }

    }
    inp.onblur = function(){
        var str = /^[/w][a-zA-Z0-9]{6,24}$/
    }
    next.onclick = function () {
        var none = document.getElementsByClassName("none")[0];
        none.style.display = "block";
    }

    window.onresize=function(){
        change();
    };

    change();
    function change(){
        var oFs=document.documentElement.clientWidth/(320/20);

        //设置根目录字体大小
        document.documentElement.style.fontSize=oFs+'px';
    }
</script>
</body>
</html>